<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.adv{
				border: 5px solid red;
				height: 200px;
				width: 300px;
				border-radius: 50%;
				overflow: hidden;
			}
		</style>
		<script src="../js/jquery-3.6.3.min.js"></script>
		<script>
			$(function(){
				$("#b1").click(function(){
					//$("#d1").addClass("adv");
					//有这个样式，去掉；没有，加上。
					$("#d1").toggleClass("adv");
				});
				$("#b2").click(function(){ 
					var t=this;//!方法内部，this指向当前函数。要使用外部的，必须暂存
					if($("#d1").is(":hidden")){
						$("#d1").show(2000,function(){
							$(t).text('消失');
						});
						
						return;
					}
					$("#d1").hide(3000);
					$(this).text('显示');
					// $("#d1").hide(3000,function(){
					// 	alert("图片不见了");
					// });
				});
				$("#b3").click(function(){
					var t=this;//!方法内部，this指向当前函数。要使用外部的，必须暂存
					if($("#d1").is(":hidden")){
						$("#d1").fadeIn(2000,function(){
							$(t).text('消失');
						});
						
						return;
					}
					$("#d1").fadeOut(3000);
					$(this).text('显示'); 
				});
				$("#b4").click(function(){
					 $("#d1").fadeToggle(3000); 
				});
			})
		</script>
	</head>
	<body>
		<div id="d1">
			<img src="../3-22/img3.png"/>
		</div>
		<div>
			<button type="button" id="b1">切换样式</button>
			
			<button type="button" id="b2">消失</button>
			
			<button type="button" id="b3">消失</button>
			
			<button type="button" id="b4">消失4</button>
		</div>
	</body>
</html>